<template>
  <!-- 外围最大的盒子 -->
  <div class="List">
    <!-- 图片区域 -->
    <div class="myimg" v-if="myimage != ''">
      <img
        id="myone"
        :src="'data:image/png;base64,' + myimage"
        :style="{
          width: width * 0.6 * num + 'px',
          height: height * 0.6 * num + 'px',
          marginLeft: loctionleft + 'px',
          marginTop: loctiontop + 'px',
        }"
      />
        <!-- 点击列表中的每一项显示的圆点 -->
        <!-- <span
          v-if="newList != ''"
          id="span"
          :style="{
            width: 20 * num + 'px',
            height: 20 * num + 'px',
            fontSize: 18 * num + 'px',
            top:
              height * num * 0.5 -
              ((newList.y / 10 - newy * 100 - 168) * num) / 10 +
              'px',
            left: ((newList.x / 10 - newx * 100 - 168) * num) / 10 + 'px',
          }"
          >{{ newList.id }}</span
        > -->
        <!-- 实时显示车辆位置 -->
        <img
          src="../../../assets/车辆.png"
          alt=""
          :style="{
            transform: 'rotate(' + -(fused_angle * 180 / Math.PI +90) + 'deg)',
            top: (height - (y / 10.0) / 5 ) * 0.6 * num -(30* 0.6 * num/2)+ loctiontop + 'px',
            left: ((x / 10.0) / 5) * 0.6 * num-(15* 0.6 * num/2) + loctionleft + 'px',
            width: 15*num * 0.6+ 'px',
            height: 30 *num* 0.6+ 'px',
          }"
          id="vehicle"
        />
        <!-- -------------------------------------------------------------------展现出全部充电点 -->
        <!-- 禁用状态图片 -->
        <div class="mybycar jinyong">
          <template v-for="(item, index) in recordList">
            <img
              v-if="item.valuable_bits == 0"
              :key="index"
              id="bycar"
              src="../../../assets/飞书20220913-115140.png"
              alt=""
              :style="{
                width: 20 * num* 0.6+ 'px',
                height: 20 * num* 0.6 + 'px',
                top: (height - (item.y / 10.0) / 5 ) * 0.6 * num-(20* 0.6 * num/2) + loctiontop + 'px',
                left: ((item.x / 10.0) / 5) * 0.6 * num-(20* 0.6 * num/2) + loctionleft + 'px',
                transform: 'rotate(' +item.angle* 180 / Math.PI + 'deg)',
              }"
            />
          </template>
        </div>
        <!-- 启用状态图片 -->
        <div class="mybycar qiyong">
          <template v-for="(item, index) in recordList">
            <img
              v-if="item.valuable_bits == 1"
              :key="index"
              id="bycar"
              src="../../../assets/maiwei.zip.png"
              alt=""
              :style="{
                width: 20 * num* 0.6+ 'px',
                height: 20 * num* 0.6 + 'px',
                top: (height - (item.y / 10.0) / 5 ) * 0.6 * num-(20* 0.6 * num/2) + loctiontop + 'px',
                left: ((item.x / 10.0) / 5) * 0.6 * num-(20* 0.6 * num/2) + loctionleft + 'px',
                transform: 'rotate(' +item.angle* 180 / Math.PI + 'deg)',
              }"
            />
          </template>
        </div>

        <!--点击后显示这一项充电点  transform: 'rotate(' + newList.fused_angle* 180 / Math.PI + 'deg)', -->
        <div
          :class="{ active: newactive }"
          :style="{
                width: 20 * num* 0.6+ 'px',
                height: 20 * num* 0.6 + 'px',
            top: ((height - (newList.y / 10.0) / 5 )) * 0.6 * num-(24* 0.6 * num/2) + loctiontop + 'px',
                left: ((newList.x / 10.0) / 5 ) * 0.6 * num-(24* 0.6 * num/2) + loctionleft + 'px',
                transform: 'rotate(' +newList.angle* 180 / Math.PI + 'deg)',
          }"
        >
         
        </div>
        <!-- 启用的充电点 -->
        <div class="mybycar" v-if="newList.valuable_bits == 1">
          <img
            id="bycar"
            src="../../../assets/maiwei.zip.png"
            alt=""
            :style="{
              width: 20 * num* 0.6 + 'px',
              height: 20 * num* 0.6 + 'px',
              top: (height - (newList.y / 10.0) / 5 ) * 0.6 * num-(20* 0.6 * num/2) + loctiontop + 'px',
                left: ((newList.x / 10.0) / 5) * 0.6 * num-(20* 0.6 * num/2) + loctionleft + 'px',
              transform: 'rotate(' +newList.angle* 180 / Math.PI + 'deg)',
            }"
          />
        </div>
        <!-- 禁用的充电点 -->
        <div class="mybycar" v-if="newList.valuable_bits == 0">
          <img
            id="bycar"
            src="../../../assets/飞书20220913-115140.png"
            alt=""
            :style="{
              width: 20 * num* 0.6 + 'px',
              height: 20 * num* 0.6 + 'px',
              top: (height - (newList.y / 10.0) / 5 ) * 0.6 * num-(20* 0.6 * num/2) + loctiontop + 'px',
                left: ((newList.x / 10.0) / 5) * 0.6 * num-(20* 0.6 * num/2) + loctionleft + 'px',
              transform: 'rotate(' +newList.angle* 180 / Math.PI + 'deg)',
            }"
          />
        </div>
      <!-- 按钮区域 -->
      <van-button @click="right" class="right"
        ><van-icon name="arrow" size="44"
      /></van-button>
      <van-button @click="left" class="left"
        ><van-icon name="arrow-left" size="44"
      /></van-button>
      <van-button @click="top" class="top"
        ><van-icon name="arrow-up" size="44"
      /></van-button>
      <van-button @click="bottom" class="bottom"
        ><van-icon name="arrow-down" size="44"
      /></van-button>
      <!-- --------------------------------------------------------------按钮放大缩小区域 -->
      <div class="mybig">
        <van-button type="info" @click="big"
          ><i class="iconfont icon-sousuofangda" style="fontsize: 32px"></i
        ></van-button>
        <van-button type="info" @click="min"
          ><i class="iconfont icon-suoxiao" style="fontsize: 32px"></i
        ></van-button>
      </div>
      <!-- --------------------------------------------------------------按钮放大缩小区域 -->
    </div>
    <!-- 库位属性内容 -->
    <div class="property">
      <!-- 删除库位按钮 -->
      <div class="mybutton" v-if="newList != ''">
        <!-- <van-button @click="remove(newList.id)">删除</van-button> -->
        <van-button @click="enable">启用</van-button>
        <van-button @click="disabled">禁用</van-button>
      </div>
      <div class="zore">充电点属性</div>
      <div class="beiji">
        <div class="middle" v-if="newList != ''">
          <div class="one">
            <span>ID:</span
            ><span style="color: #fff; marginleft: 35px">
              {{ newList.id }}</span
            >
          </div>
          <div class="x">
            <!-- <span>x轴坐标:</span><span>{{ newList.x }}</span> -->
            <!-- x轴坐标区域 -->
            <!-- <van-field
              label-width="80"
              @focus="addX"
              v-model="newList.x"
              label="x轴:"
              placeholder="请输入x轴坐标"
              :value="newList.x"
            /> -->
            <span>X轴:</span>
            <keyboardss :inputValue="newList.x" @keyList="ListX"></keyboardss>
          </div>
          <div class="y">
            <!-- y轴区域 -->
            <!-- <van-field
              label-width="80"
              @focus="addY"
              v-model="newList.y"
              label="y轴:"
              placeholder="请输入y轴坐标"
              :value="newList.y"
            /> -->
            <!-- <span>y轴坐标:</span><span>{{ newList.y }}</span> -->
            <span>Y轴:</span>
            <keyboardss :inputValue="newList.y" @keyList="ListY"></keyboardss>
          </div>
          <div class="info">
            <span
              >状态:
              <span style="color: #fff; marginleft: 15px">{{
                newList.valuable_bits == 1 ? "启用" : "禁用"
              }}</span></span
            >
          </div>
          <div class="sonbutton">
            <van-button @click="seve(newList.id)">保存</van-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import Cookies from 'js-cookie'
import { Dialog } from "vant";
//导入封装好的删除数据接口
import { removeApi, updataApi } from "@/api/record";
// 导入yaml格式进行获取到数据的转换
import yaml from "js-yaml";
export default {
  //接受父组件传过来的值
  props: ["newList", "recordList", "xshow", "yshow", "newactive"],
  data() {
    return {
      // newactive:true,
      oneimg: "../../../assets/充电车.png",
      twoimg: "../../../assets/充电车-1.png",
      one: 0, //禁用标识
      two: 1, //启用按钮标识
      loctiontop: 0, //右边偏移变量
      loctionleft: 0, //左边便宜变量
      num: 0.5,
      myimage: "", //定义一个变量用来保存base64格式的数据
      width: "", //图片宽度
      height: "", //图片高度
      x: "", //保存x轴坐标
      y: "", //保存y轴坐标
      newx: "",
      newy: "",
      fused_angle: "", //定义一个变量保存角度
    };
  },
  created() {
    this.gain(); //一打开页面就就调用此方法
  },
  mounted() {
    let numss = Cookies.get('nums');
    let loctiontopss = Cookies.get('loctiontops');
    let loctionleftss = Cookies.get('loctionlefts');
    if(numss == undefined){
    }else{
      this.num = Number(numss);
    }
    if(loctiontopss == undefined){
    }else{
      this.loctiontop = Number(loctiontopss);
    }
    if(loctionleftss == undefined){
    }else{
      this.loctionleft = Number(loctionleftss);
    }
  },
  // mounted() {
  //   var div = document.getElementById("myone");
  //   div.addEventListener("touchstart", function (e) {
  //     var x = e.targetTouches[0].pageX - e.currentTarget.offsetLeft + 240;
  //     var y = e.targetTouches[0].pageY - e.currentTarget.offsetTop + 40;
  //     document.addEventListener("touchmove", move);
  //     function move(e) {
  //       div.style.left = e.targetTouches[0].pageX - x + "px";
  //       div.style.top = e.targetTouches[0].pageY - y + "px";
  //     }
  //     document.addEventListener("touchend", function () {
  //       document.removeEventListener("touchmove", move);
  //     });
  //   });
  // },

  methods: {
    ListX(val) {
      this.newList.x = Number(val);
    },

    ListY(val) {
      this.newList.y = Number(val);
    },

    //保存事件
    async seve(id) {
      try {
        //发送请求进行修改
        let res = await updataApi({
          id: id,
          x: this.newList.x,
          y: this.newList.y,
          type: this.newList.type,
        });
        //提示用户保存成功
        this.$toast.success("保存成功");
        //进行页面刷新
        this.$parent.getGain();
      } catch {
        //提示用户保存失败
        this.$toast.fail("保存失败");
      }
    },
    //-------------------------+ 键盘事件区域
    // y轴输入框焦点事件
    addY() {
      //生成自定义事件修改父组件中的值
      this.$emit("newyShow", true, false);
      //生成自定义事件关闭x轴
      // this.$emit('newxShow',false)
    },
    // x轴输入框焦点事件
    addX() {
      //生成自定义事件修改父组件中的值
      this.$emit("newxShow", true, false);
      //生成自定义事件修改y键盘的显示和隐藏
      // this.$emit('newyShow',false)
    },
    //启用按钮
    async enable() {
      //发送请求修改启用按钮的值为1
      let res = await updataApi({
        id: this.newList.id,
        type: this.newList.type,
        valuable_bits: this.two,
        x: this.newList.x,
        angle: this.newList.angle,
        y: this.newList.y,
      });
      //使用this.$set让数据变成响应式
      this.$set(this.newList, "valuable_bits", this.two);
      //提示用户改为启用
      this.$toast.success("启用成功");
    },
    //禁用按钮
    async disabled() {
      //发送请求修改启用按钮的值为0
      let res = await updataApi({
        id: this.newList.id,
        type: this.newList.type,
        valuable_bits: this.one,
        x: this.newList.x,
        angle: this.newList.angle,
        y: this.newList.y,
      });
      //使用this.$set让数据变成响应式
      this.$set(this.newList, "valuable_bits", this.one);
      //提示用户禁用成功
      this.$toast.success("禁用成功");
      this.$emit("getGain");
    },

    //图片右边便宜
    right() {
      this.loctionleft += 30;
      Cookies.set('loctionlefts', this.loctionleft);
    },
    left() {
      this.loctionleft -= 30;
      Cookies.set('loctionlefts', this.loctionleft);
    },
    top() {
      this.loctiontop -= 30;
      Cookies.set('loctiontops', this.loctiontop);
    },
    bottom() {
      this.loctiontop += 30;
      Cookies.set('loctiontops', this.loctiontop);
    },

    //放大图片按钮
    big() {
      if (this.num >= 2) {
        this.num = 2;
        return;
      } else {
        this.num += 0.1;
      }
      Cookies.set('nums', this.num);
    },
    // 缩小按钮
    min() {
      if (this.num <= 0.5) {
        this.num = 0.4;
        return;
      } else {
        this.num -= 0.1;
      }
      Cookies.set('nums', this.num);
    },
    // 刷新页面按钮
    restore() {
      //回到第0个页面
      this.$router.go(0);
    },
    //用来获取图片数据的方法
    gain() {
         let ws = new WebSocket("ws://" + window.location.hostname + ":10009"); //获取到本地服务器的地址
      //     let ws = new WebSocket("ws://192.168.20.101:10009"); //发送webSocket请求
      ws.onmessage = (e) => {
        //使用箭头函数改变this的指向
        //当服务器有消息，就会自动调用这个函数 //e.data有服务器返回的数据
        const res = yaml.load(e.data); //使用yaml格式进行转换
        if (res.uri == "/sirius/topics/slam_grid_map") {
          //判断res中的uri路劲是不是等于有图片的路径
          this.myimage = res.data; //如果等于就 把里面中有的data进行base格式进行拼接
          this.width = res.info.width; //保存图片的宽度
          this.height = res.info.height; //保存图片的高度
          this.newx = res.info.origin.position.x;
          this.newy = res.info.origin.position.y;
          //console.log(this.newx, "圆点x轴", this.newy, "圆点y轴");
        } else if (res.uri == "/sirius/topics/robot_status_localizer_result") {
          this.x = res.fused_x; //给x轴坐标赋值
          this.y = res.fused_y; //给y轴坐标赋值
          this.fused_angle = res.fused_angle; //保存角度
          //console.log(this.x, this.y, "位置坐标");
        }
      };
    },
  },
};
</script>

<style lang="less" scoped>
.List {
  width: 100%;
  .myimg {
    position: relative;
    display: flex;
    border: 2px solid black;
    height: 400px;
    width: 955px !important;
    overflow: hidden;
    .right {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: transparent;
      position: absolute;
      top: 40%;
      right: 38%;
      color: #1ac1c1;
      z-index: 1000;
      border: none;
    }
    .left {
      position: absolute;
      top: 40%;
      left: -35px;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: transparent;
      color: #1ac1c1;

      border: none;
      z-index: 1000;
    }
    .top {
      position: absolute;
      top: -35px;
      right: 64%;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: transparent;
      color: #1ac1c1;

      z-index: 1000;
      border: none;
    }
    .bottom {
      position: absolute;
      bottom: -35px;
      right: 64%;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: transparent;
      color: #1ac1c1;
      // z-index: 10;
      border: none;
    }
    .van-image {
      position: relative;
      #span {
        position: absolute;
        width: 25px;
        height: 25px;
        background-color: skyblue;
        line-height: 25px;
        font-size: 18px;
        text-align: center;
      }
      .van-button {
        width: 150px;
        height: 40px;
        border-radius: 10px;
        background-color: #ffc000;
        position: fixed;
        top: 15px;
        left: 25px;
        font-size: 18px;
      }
    }
  }
  .property {
    position: fixed;
    top: 90px;
    right: 0;
    height: 1000px;
    text-align: left;
    line-height: 45px;
    width: 200px;
    background-color: #12151a;
    .mybutton {
      text-align: center;
      .van-button {
        color: #fff;
        height: 40px;
        font-size: 18px;
        border-radius: 8px;
        width: 170px;
        background-color: #1a1c25;
        border: none !important;
        margin-top: 12px;
      }
    }
    .zore {
      font-size: 24px;
      line-height: 45px;
      height: 45px;
      color: white;
      margin-top: 20px;
      background-color: #212430;
      border-radius: 14px 14px 0 0;
      text-align: center;
    }
    .middle {
      font-size: 22px;
      text-indent: 1em;
      .one {
        text-indent: 1.2em;
        color: #dbdbdb;
      }
    }
    .sonbutton {
      margin-top: 40px;
      text-align: center;
      .van-button {
        color: #fff;
        border: 2px solid #1989fa;
        font-weight: 700;
        width: 100px;
        height: 43px;
        border-radius: 20px;
        background-color: #181a23;
      }
    }
  }
}

#myone {
  position: relative;
  #span {
    display: inline-block;
    background-color: #00d1d1;
    position: absolute;
  }
}

.beiji {
  color: #5f5f61;
  height: 100%;
  background-color: #181a23;
}

.mybig {
  position: fixed;
  bottom: 30px;
  right: 240px;
  .van-button {
    margin-left: 20px;
  }
}
#bycar {
  position: absolute;
}
.Gray {
  position: absolute;
  background-color: #feed9d;
  border: 2px solid #cfc598;
}
::v-deep.van-cell {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 0px !important;
  overflow: hidden;
  color: #fff !important;
  font-size: 18px;
  line-height: 24px;
  background-color: #181a23 !important;
}
::v-deep input {
  color: #fff !important;
}
.active {
  border: 2px solid #ff0000;
  position: absolute;
  border-radius: 5px;
}
.info {
  text-indent: 1.2em;
  color: #dbdbdb;
}
.y {
  display: flex;
  span {
    font-size: 20px;
    color: #dbdbdb;
    text-indent: 1.5em;
  }
}
.x {
  display: flex;
  span {
    font-size: 20px;
    color: #dbdbdb;
    text-indent: 1.5em;
  }
}
#vehicle {
  position: absolute;
}

</style>
